<template>
  <div class="main">
    <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
      <!-- 使用tabs 为多方式登录左准备 -->
      <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
        @change="handleTabClick">



        <a-tab-pane key="tab1" tab="账户名密码登录">
          <a-form-item>
            <a-input
              size="large"
              v-decorator="['username',validatorRules.username]"
              type="text"
              placeholder="请输入帐户名">
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              v-decorator="['password',validatorRules.password]"
              size="large"
              type="password"
              autocomplete="false"
              placeholder="密码">
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>
          <a-form-item  style="margin-bottom:0">
            <a-switch v-decorator="['rememberMe', {initialValue:true}]" checked-children="记住我" default-checked  style="float: right"/>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>
      <a-form-item style="margin-top:24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="loginBtn"
          @click.stop.prevent="handleSubmit"
          :disabled="loginBtn">确定
        </a-button>
      </a-form-item>
    </a-form>

  </div>
</template>

<script>
  import { timeFix } from "../../utils/util";
  import {postAction} from '../../api/manage';
  import { common, eleCommon } from '../../api/url';
  import {userType_eleMainOrgUser, userType_sys} from '../../config/constant.config'
  import qs from 'qs';


  export default {

    components:{},
    data () {
      return {
        // 当前显示的tab
        customActiveKey: "tab1",
        // 登录按钮是否置为灰色，不可点击
        loginBtn: false,
        // form变淡
        form: this.$form.createForm(this),
        // 表单字段
        formLogin: {
          username: "admin",
          password: "admin",
          rememberMe:true
        },
        // 表单字段验证
        validatorRules:{
          username:{rules: [{ required: true, message: '请输入用户名!',validator: 'click'}]},
          password:{rules: [{ required: true, message: '请输入密码!',validator: 'click'}]}
        },
      }
    },
    mounted () {
      // 清除token
      this.$store.commit('CLEAR_USER');
    },
    methods: {
      // handler
      // 当Tab点击时切换tab
      handleTabClick(key) {
        this.customActiveKey = key
      },
      // 处理登录
      handleSubmit() {
        // 禁用登录按钮
        this.loginBtn = true;
        // 使用账户密码登陆
        if (this.customActiveKey === 'tab1') {
          this.doUsernamePasswordLogin(this.form);
        }
      },
      /**
       * 用户名密码登录
       * @param form 表单
       */
      doUsernamePasswordLogin(form){
        form.validateFields(['username', 'password', 'rememberMe'], { force: true }, (err, values) => {
            if (!err) {
              let loginParams = {};
              loginParams.username = values.username;
              loginParams.password = values.password;
              loginParams.rememberMe = values.rememberMe;
              postAction(common.login, qs.stringify(loginParams))
                .then(res=>{
                  if(res.success){
                    this.$store.commit('SET_TYPE', userType_sys);
                    this.loginSuccess(res.result);
                  }
                }).finally(()=>{
                  this.loginBtn = false;
              });
            } else {
              this.loginBtn = false;
            }
          });
      },


      // 登录成功跳转首页 token 登录成功后返回值
      loginSuccess(token) {
        this.loginBtn = false;
        this.$store.commit('SET_TOKEN', token);
        this.$router.push({ path: this.$route.query.redirect||"/"});
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`,
        });
      },

    }
  }
</script>

<style lang="scss" scoped>

  .user-layout-login {
    label {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0,0,0,.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color .3s;

        &:hover {
          color: #1890ff;
        }
      }


    }
  }

</style>
<style>
  .valid-error .ant-select-selection__placeholder{
    color: #f5222d;
  }
</style>